<template>
  <!--试题导航-->
  <view class="AnswerNav f_1">
    <u-popup :show="isPopup" :round="15" mode="bottom" @close="close" safe-area-inset-bottom closeable>
      <view class="title">试题导航</view>
      <view class="total-box flex between">
        <view class="btn fs_0" v-if="currentIndex===answerData.total">清空练习</view>
        <view class="f_1 flex between">
          <view class="menu-item">
            <u-icon name="star-fill" size="24" color="#FF9D00"></u-icon>
            <text>收藏</text>
          </view>
          <view class="menu-item">
            <view class="flex item-center">
              <u-icon name="checkmark-circle-fill" size="20" color="#37B874"></u-icon>
              <text>{{ answerData.successTotal }}</text>
            </view>
            <view class="flex item-center" style="margin-left: 10px">
              <u-icon name="close-circle-fill" size="20" color="#FF3D31"></u-icon>
              <text>{{ answerData.errorTotal }}</text>
            </view>
          </view>
          <view class="menu-item" v-if="currentIndex">
            {{ currentIndex }}/{{ answerData.total }}
          </view>
        </view>

      </view>

      <view class="content f_1 scroll-y flex f_wrap">
        <view v-for="(item,index) in navList" :key="index" class="flex item-center justify-center"
              :style="{ width: itemWidth }" @click="itemClick(index)">
          <text class="nav-item" :class="{success:item.correct,error:!item.correct,collect:item.collectStatus}">
            {{ index + 1 }}
          </text>
        </view>
      </view>

    </u-popup>
  </view>


</template>
<script>
export default {
  name: "AnswerNav",
  props: {
    navList: {
      type: Array,
      required: true
    },
    answerData: {
      type: Object,
      required: true
    },
    currentIndex: {
      default: 1,
      type: Number,
    }
  },
  data() {
    return {
      isPopup: false,
    }
  },
  computed: {
    itemWidth() {
      const screenWidth = uni.getSystemInfoSync().windowWidth; // 获取屏幕宽度
      // 计算每个项的宽度
      return `${(screenWidth / 7)}px`;
    }
  },
  methods: {
    close() {
      this.isPopup = false;
      this.$emit("close")
    },
    open() {
      this.isPopup = true;
    },
    itemClick(index) {
      this.$emit("navItemClick",index)
    }
  }
}
</script>
<style scoped lang="scss">
.AnswerNav {

  .title {
    color: #333333;
    font-size: 32rpx;
    font-weight: bold;
    text-align: center;
    height: 75px;
    line-height: 75px;

  }

  .total-box {
    border-bottom: 3px solid #EEEEEE;
    padding: 0 16px 9px 16px;
    .menu-item {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      font-size: 16px;

      text {
        margin-left: 6px;
        color: #333333;
      }
    }

    .btn {
      background-color: #37B874;
      width: 80px;
      height: 24px;
      text-align: center;
      line-height: 24px;
      border-radius: 12px;
      font-size: 14px;
      color: #FFFFFF;
      margin-right: 10%;
    }
  }

  .nav-item {
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 6px;
    border: 1px solid #999999;
    font-size: 14px;
    color: #999999;
    margin-top: 16px;

    &.error {
      color: #FF4040;
      border: 1px solid #FF4040;
    }

    &.success {
      color: #37B874;
      border: 1px solid #37B874;
    }

    &.collect {
      color: #FF9D00;
      border: 1px solid #FF9D00;
    }
  }
  .content{
    padding-bottom: 30px;
  }

}
</style>